<template>
  <div class="user-password">
    <h3 class="h2-title">密码设置</h3>
    <div class="candy-card clearfix" v-page-height>
      <div class="left info">
        <div>
          <p>
            账户名称：
            <span>{{ suser['name'] }}</span>
          </p>
          <p>
            账户账号：
            <span>{{ suser['phone'] }}</span>
          </p>
          <p v-if="suser['lastLogonTime']">
            最近登陆时间：
            <span v-ftime="suser['lastLogonTime']"></span>
          </p>
        </div>
      </div>
      <div class="left form">
        <h4>修改密码</h4>
        <el-form
          :model="ruleForm"
          :rules="rules"
          ref="ruleForm"
          label-width="0px"
          class="forget-form"
        >
          <el-form-item prop="originalPassword">
            <el-input
              type="password"
              v-model.trim="ruleForm.originalPassword"
              prefix-icon="el-icon-lock"
              size="small"
              placeholder="请输入原密码"
            ></el-input>
          </el-form-item>
          <el-form-item prop="password">
            <el-input
              type="password"
              size="small"
              v-model.trim="ruleForm.password"
              prefix-icon="el-icon-lock"
              placeholder="请输入新密码(密码应为八位数以内)"
              maxlength="8"
              show-word-limit
            ></el-input>
          </el-form-item>
          <el-form-item prop="comfirmPassword">
            <el-input
              type="password"
              size="small"
              v-model.trim="ruleForm.comfirmPassword"
              prefix-icon="el-icon-lock"
              placeholder="请输入确认密码(密码应为八位数以内)"
              maxlength="8"
              show-word-limit
            ></el-input>
          </el-form-item>
          <div>
            <el-button
              type="dark"
              size="small"
              class="block"
              @click="submitForm"
              >确定</el-button
            >
          </div>
        </el-form>
      </div>
    </div>
  </div>
</template>
<script>
import md5 from 'js-md5';
import { mapGetters } from 'vuex';

export default {
  name: 'UserPassword',
  data() {
    /**
     * 验证两次密码是否一致
     */
    const validatePassEquil = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请再次输入密码'));
      } else if (value !== this.ruleForm.password) {
        callback(new Error('两次输入密码不一致!'));
      } else {
        callback();
      }
    };
    return {
      ruleForm: {
        originalPassword: '',
        password: '',
        comfirmPassword: ''
      },
      rules: {
        originalPassword: [
          { required: true, message: '请输入原密码', trigger: 'blur' }
        ],
        password: [
          { required: true, message: '请输入新密码', trigger: 'blur' }
        ],
        comfirmPassword: [
          { required: true, validator: validatePassEquil, trigger: 'blur' }
        ]
      }
    };
  },
  computed: {
    ...mapGetters({
      user: 'user/user',
      suser: 'user/suser'
    })
  },
  methods: {
    /**
     * 修改密码
     */
    async updatePasswordAfterSign() {
      const params = {
        originalPassword: md5(this.ruleForm.originalPassword),
        password: md5(this.ruleForm.password)
      };

      const { data } = await this.$http.post(
        { map: 'LOGIN', url: 'updatePasswordAfterSign' },
        params
      );
      if (data['success']) {
        window.localStorage.removeItem('token');
        this.$notify({
          title: '成功',
          message: '密码重置成功,请重新登录。',
          type: 'success'
        });
        this.$refs['ruleForm'].resetFields();
        setTimeout(() => {
          this.$router.push({ name: 'login' });
        }, 1000);
      } else {
        this.$notify({
          title: '错误',
          message: data['msg'],
          type: 'error'
        });
      }
    },
    submitForm() {
      this.$refs['ruleForm'].validate(valid => {
        if (valid) {
          this.updatePasswordAfterSign();
        } else {
          return false;
        }
      });
    }
  }
};
</script>
<style lang="less" scoped>
.user-password {
  .info {
    margin-right: 2.74rem;
    p {
      margin: 0;
      padding: 0;
      line-height: 0.16rem;
      margin-bottom: 0.26rem;
      font-size: 0.16rem;
      font-weight: 500;
      color: #333;
      span {
        color: #666;
      }
    }
  }
  .form {
    width: 4rem;
    h4 {
      font-size: 0.16rem;
      font-weight: 600;
      color: rgba(51, 51, 51, 1);
      margin-bottom: 0.36;
    }
    .block {
      display: block;
      width: 100%;
      margin: 0 auto;
    }
  }
}
</style>
